<template>
  <el-container style="height:100vh">
    <el-header style="background: #0b3464;">
      <div class="logo">廉江新型智慧城市</div>
      <div class="time">
        <div class="left">{{date.time}}</div>
        <div class="right">
          <div class="top">{{date.date}}</div>
          <div class="botton">{{date.day}}</div>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <div class="title">
        <h1>智慧廉江统一门户</h1>
        <!-- <h3>Wisdom Lianjiang unified portal</h3> -->
      </div>
      <div class="content">
        <div class="item" v-for="(item, index) in datas" :key="index">
          <a target="_blank" :href="item.url" v-if="!item.data">
            <div :class="`icon iconfont ${item.icon}`"></div>
            <div class="text">{{item.text}}</div>
          </a>
          <router-link v-else :to="`page/${item.id}`" class="btn">
            <div :class="`icon iconfont ${item.icon}`"></div>
            <div class="text">{{item.text}}</div>
          </router-link>
        </div>
      </div>
    </el-main>
    <div class="footer">广东国地规划科技股份有限公司 版权所有 粤ICP备19020983号</div>
  </el-container>
</template>

<script>
import datas from "@/assets/json/index.js";
export default {
  data() {
    return {
      datas,
      date: {
        time: "",
        date: "",
        day: ""
      },
      day: [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ],
      timer: ""
    };
  },
  mounted() {
    this.setTime();
    this.timer = setInterval(this.setTime, 6000);
  },
  methods: {
    setTime() {
      var time = new Date();
      var year = time.getFullYear(); //2019
      var mouth = time.getMonth() + 1;
      mouth = mouth >= 10 ? mouth : "0" + mouth;
      var date = time.getDate();
      date = date >= 10 ? date : "0" + date;
      var week = time.getDay();
      var hours = time.getHours();
      hours = hours >= 10 ? hours : "0" + hours;
      var minutes = time.getMinutes();
      minutes = minutes >= 10 ? minutes : "0" + minutes;
      this.date = {
        time: `${hours}:${minutes}`,
        date: `${year} / ${mouth} / ${date}`,
        day: this.day[week]
      };
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.time {
  float: right;
  color: #fff;
  margin-top: 9px;
  width: 200px;
  height: 42px;
  .left {
    font-size: 32px;
  }
  .right {
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.logo {
  float: left;
  margin-top: 9px;
  width: 250px;
  height: 42px;
  line-height: 42px;
  font-size: 30px;
  color: white;
  // background: url(../assets/imgs/logoW.png) no-repeat;
  // background-size: auto 42px;
  text-align: center;
  font-family: cursive;
  font-weight: 800;
}
.main {
  background: url(../assets/imgs/bgtext.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  .content {
    max-width: 600px;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .item {
      width: 110px;
      height: 110px;
      border: 1px solid #63e7ff;
      margin: 20px;
      border-radius: 6px;
      box-shadow: 0 0 20px 0 rgba($color: #63e7ff, $alpha: 0.3) inset;
      text-align: center;
      overflow: hidden;
      &:hover {
        box-shadow: 0 0 20px 0 rgba($color: #63e7ff, $alpha: 0.8) inset,
          0 0 20px 0 rgba($color: #63e7ff, $alpha: 0.8);
        // font-weight: 800;
        .text {
          background-color: rgba($color: #63e7ff, $alpha: 0.2);
          text-shadow: 0 0 10px rgba($color: #63e7ff, $alpha: 0.8);
        }
      }
      .icon {
        height: 80px;
        line-height: 80px;
        color: #63e7ff;
        font-size: 52px;
      }
      .text {
        height: 30px;
        line-height: 30px;
        background-color: rgba($color: #1e3f5a, $alpha: 0.4);
        color: #25d6f8;
      }
    }
  }
}
.title {
  background: linear-gradient(to top, #82dded, #29dcff);
  background-clip: text;
  color: transparent;
  text-align: center;
  font-family: cursive;
  h1 {
    font-size: 60px;
  }
  h3 {
    font-size: 20px;
  }
}
</style>